<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/application.js"></script>
</head>
<body>
<div data-role="page" id="page">

    <div data-role="header">
        <h1>Notekeeper</h1>
    </div>

    <div data-role="content">
        <form>
            <div>
                <input id="title" type="text" placeholder="Add a note">
            </div>
            <div>
                <textarea id="note"  placeholder="The content of your note"></textarea>
            </div>
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <input id="btnNoThanks" type="submit" value="No Thanks">
                </div>
                <div class="ui-block-b">
                    <input id="btnAddNote" type="button" value="AddNote">
                </div>
            </div>
        </form>
            <ul data-role="listview" data-inset="true" id="noteList">
                <li data-role="list-divider">your note</li>
                <li id="noNotes">no notes</li>
            </ul>
    </div>

    <div data-role="footer" data-position="fixed">
        <h1>2015</h1>
    </div>
</div>
</body>
</html>